<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/request.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .left {
        float: left;
    }
    .right{
        float: right;
    }
    div{
        text-align: center;
    }
    .boxx{
        width: 250px;
        
        margin: 10px;
        padding: 10px;
        background-color: white;
        
    }
    .boxx:hover{
        box-shadow: 0px 10px 5px #cacaca;
        transition: all 0.5s;
        transform: scale(1.01);
       outline: 3px solid #cacaca;
    }
    .boxx:hover img{
        transform: scale(1.05);
        transition: all 1s;
    }
    img{
        width: 250px;

    }
    .bottom{
        padding: 0px 40px;
    }
    .good-title{
        font-weight: bold;
    }
    .wrap{
        width: 1200px;
        margin: 0 auto;
        height: 400px;
        background-color: aqua;
    }
    .clear-fix::after,.clear-fix::before{
        content: "";
        display: block;
        clear: both;
    }
    .box{
        width: 100%;
    }
    .list{
        width: 1500px;
        margin: 0 auto;
        background-color: rgb(255, 255, 255);
    }
</style>

<body>
    <div class="box">
        <div class="list clear-fix"></div>
    </div>
    
    <hr>
    <div class="wrap"></div>
</body>
<script>
    var page = 1;
    var list = document.querySelector(".list");
    function swipter() {

    }

    function getShopList() {
        REQUEST.get("/api/goodlist",
            {
                params: {
                    page: 1
                }
            }, function (data) {
                console.log(data);
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html += `
                    <div class="left boxx">
                            <img src="${data[i].img_list_url}" alt="">
                            <hr>
                            <p>
                                <span class="good-title">${data[i].title}</span>
                                
                            </p>
                            <div  class="bottom">
                                <div class="left"> 
                                <span>￥${data[i].price}</span>
                            </div>
                            <div class="right">
                                <span>${data[i].mack}</span>
                                </div>
                            </div>
                       </div>`
                }
                list.innerHTML = html;
            })
    }
    getShopList();

</script>

</html>